<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的记事本</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./download/font_4839769_42qfstm5wi2/iconfont.css">
    <link rel="icon" href="./images/笔记本.jpg">
</head>
<body>
    <header class="header">
        <div class="top">
            <span class="about-us">关于我们</span>&nbsp;&nbsp;
            <span><b>中</b></span> / <span>En</span>
        </div>
            <div class="head-container">
                <!-- 动画部分 -->
                <div class="animation-L">
                    <div class="block-1"><i class="iconfont icon-wujiaoxing1"></i></div>
                    <div class="block-2"><i class="iconfont icon-wujiaoxing1"></i></div>
                </div>
                <img src="./images/todo.svg" alt="">
                <div class="animation-R">
                    <div class="bar">
                        <i class="iconfont icon-wujiaoxing1"></i>   
                    </div>
                    <div class="clock">
                        <div class="string"></div>
                        <div class="weight"><i class="iconfont icon-yueliang"></i></div>
                    </div>
                </div>
                <!-- 添加内容框 -->
                <div class="add shadow">
                    <input type="text" maxlength="25" placeholder="新增待办事项..."class="add-input" >
                    <button type="button" class="submit">提交</button>
                </div>
            </div>
    </header>
    <!-- 主体部分 -->
    <main>
        <div class="main-box">
            <!-- 侧边导航栏 -->
            <nav>
                <div class="main-nav-close" style="display: block;">
                    <div class="switch">开</div>
                    <div class="shortcut-clo">
                        快捷操作
                    </div>
                </div>
                <div class="main-nav-open" style="display: none;">
                    <div class="switch">关</div>
                    <div class="shortcut-ope">
                        <p class="main-btn">主页</p>
                        <p class="trash-btn">回收站</p>
                        <p class="task">待办事项</p>
                        <p class="all-finish">全部标为已读</p>
                        <p class="all-del">清除全部</p>
                        <p class="all-del-forever none">清空回收站</p>
                        <p class="all-restore none">全部恢复</p>
                        <p class="import">导入(txt/json)</p>
                        <p class="derive">导出数据</p>
                    </div>
                </div>
            </nav> 
            <div class="main-head">
                <p>今日事今日毕&nbsp;<i class="iconfont icon-jiayou"></i></p>
            </div>
            <!-- 主页内容 -->
            <div class="main-container">
                <ul>
                    <li>添加你的第一个待办事项！<i class="iconfont icon-biji"></i></li>
                    <li>食用方法<i class="iconfont icon-linggan"></i>:</li>
                    <li><i class="iconfont icon-duihao"></i> 双击上面的标语和 Todo 可进行编辑</li>
                    <li><i class="iconfont icon-duihao"></i> 所有提交操作支持Enter回车键提交</li>
                    <li><i class="iconfont icon-duihao"></i> 拖拽Todo上下移动可排序(仅支持PC)</li>
                    <li><i class="iconfont icon-duihao"></i> 右侧的小窗口是快捷操作哦</li>
                </ul>
            </div>
            <!-- 新增内容 -->
            <div class="add-container none">
                <ul class="add-list">
                    
                </ul>
            </div>   
            <!-- 回收站 -->
            <div class="trash-container none">
                <ul class="trash-list"> 
                </ul>
            </div>
        </div>
    </main>
    <script src="./JS/base.js" type="module"></script>
    <script src="./JS/index.js" type="module"></script>
</body>
</html>